<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体文件浏览器</title>
    <style>
        .media-group {
            margin-bottom: 30px;
            border-bottom: 1px solid #ccc;
            padding-bottom: 20px;
        }
        .media-item {
            display: inline-block;
            margin: 10px;
            text-align: center;
        }
        .media-thumbnail {
            width: 200px;
            height: 150px;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <h1>媒体文件浏览器</h1>
    <h2>选择本地文件夹</h2>
    <input type="file" id="folderInput" webkitdirectory directory multiple />
    <div id="pathDisplay">未选择文件夹</div>

    <h2>发现{{ depulicate_file_num }}个重复文件</h2>
    
    {% for group_hash, items in grouped_media %}
    <div class="media-group">
        <h2>相似内容组 ({{ items|length }}个文件)</h2>
        {% for item in items %}
        <div class="media-item">
            {% if item.thumbnail %}
            <img src="{{ url_for('thumbnail_file' if item.type == 'video' else 'uploaded_file', 
                              filename=item.thumbnail.split('/')[-1]) }}" 
                 class="media-thumbnail">
            {% endif %}
            <div>{{ item.name }}</div>
            <div>({{ item.type }})</div>
        </div>
        {% endfor %}
    </div>
    {% endfor %}

    <script>
        document.getElementById('folderInput').addEventListener('change', function(e) {
            const files = e.target.files;
            if (files.length > 0) {
                // 获取第一个文件的相对路径并提取文件夹路径
                const fullPath = files[0].webkitRelativePath;
                const folderPath = fullPath.substring(0, fullPath.indexOf('/'));
                document.getElementById('pathDisplay').textContent = 
                    `已选择文件夹: ${folderPath}\n包含文件数: ${files.length}`;
            }
        });
    </script>
</body>
</html>
